<template>
	<div class="app-container">
		<div class="header">
			<svg-icon icon-class="system-erp" style="width: 18px; height: 18px; position: relative; top: 1px; margin-right: 10px" />审核采购信息
			<span style="float: right; margin-top: -5px">
				<el-button type="primary" @click="toCheckLogs">查看采购审核日志</el-button>
				<el-button
					v-if="
						(form.procureStatus == '1' && userStore.$state.roles.includes('gc1')) ||
						(form.procureStatus == '2' && userStore.$state.roles.includes('sj1')) ||
						(form.procureStatus == '4' && userStore.$state.roles.includes('jl'))
					"
					type="primary"
					@click="toCheck()"
					><el-icon style="margin-right: 5px"><Check /></el-icon>审核</el-button
				>
				<el-button
					v-if="
						(form.procureStatus == '1' || form.procureStatus == '3') &&
						(userStore.$state.roles.includes('gc2') || userStore.$state.roles.includes('cg2') || userStore.$state.roles.includes('cg1'))
					"
					type="primary"
					@click="toEdit()"
					><el-icon style="margin-right: 5px"><Edit /></el-icon>编辑</el-button
				>
				<el-button
					v-if="
						(form.procureStatus == '0' && (userStore.$state.roles.includes('gc2') || userStore.$state.roles.includes('cg2'))) ||
						userStore.$state.roles.includes('cg1')
					"
					type="primary"
					@click="toSub()"
					><el-icon style="margin-right: 5px"><Edit /></el-icon>提交审核</el-button
				>
				<el-button v-if="form.procureStatus == '3' && userStore.$state.roles.includes('gc2')" type="primary" @click="toDelete()"
					><el-icon style="margin-right: 5px"><Delete /></el-icon>删除</el-button
				>
			</span>
		</div>
		<el-form ref="baseform" :model="form" label-position="right" :rules="rules" label-width="150px">
			<el-form-item prop="procureName" label="名称">
				<el-input disabled v-model="form.procureName" style="width: 50%" placeholder="请输入名称" />
			</el-form-item>
			<el-form-item prop="projectId" label="项目">
				<div>{{ form.projectName }}</div>
			</el-form-item>
			<el-form-item v-if="dowloadList.length != '0'" label="附件下载">
				<div class="info-url" v-for="(item, index) in dowloadList" :key="index" @click="downloadFile(item)">
					<el-icon style="position: relative; top: 3px"><Link /></el-icon>&nbsp;{{ item }}
				</div>
			</el-form-item>
			<el-divider style="margin: 15px 0" />
			采购项配置
			<el-divider style="margin: 15px 0" />
			<div style="overflow-x: auto; height: 250px; overflow-y: auto">
				<div class="item-row" v-for="(item, index) in form.projectProcureItemBos" :key="index">
					<div class="item-col">
						分类：
						<el-select disabled v-model="item.itemType" style="width: calc(100% - 100px)" placeholder="请选择">
							<el-option v-for="item in item_type" :key="item.value" :label="item.label" :value="Number(item.value)" />
						</el-select>
					</div>
					<div style="width: 300px !important">
						报价单：
						<el-select disabled v-model="item.quotationItemId" style="width: calc(100% - 100px)" placeholder="请选择">
							<el-option v-for="item in quotationList" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</div>
					<div style="width: 300px !important">
						产品分类：
						<el-select disabled v-model="item.productTypeId" style="width: calc(100% - 100px)" placeholder="请选择">
							<el-option v-for="item in productOption" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
						<!-- <el-cascader
							v-model="form.productTypeId"
							disabled
							:options="productOption"
							style="width: calc(100% - 100px)"
							:show-all-levels="false"
							placeholder="请选择"
						/> -->
					</div>
					<div class="item-col">
						物品名称：
						<el-input disabled v-model="item.itemName" style="width: calc(100% - 100px)" placeholder="" />
					</div>
					<div class="item-col">
						技术参数：
						<el-input disabled v-model="item.itemParameter" style="width: calc(100% - 100px)" placeholder="" />
					</div>
					<div class="item-col">
						品牌：
						<el-input disabled v-model="item.itemBrand" style="width: calc(100% - 60px)" placeholder="" />
					</div>

					<div class="item-col">
						数量：
						<el-input-number
							disabled
							:controls="false"
							v-model="item.itemNumber"
							style="width: calc(100% - 60px)"
							placeholder=""
							:precision="2"
							:step="0.01"
							:min="0" />
					</div>
					<div class="item-col">
						单价：
						<el-input-number
							disabled
							:controls="false"
							v-model="item.itemUnitPrice"
							style="width: calc(100% - 80px)"
							placeholder=""
							:precision="2"
							:step="0.01"
							:min="0" />元
					</div>
					<div style="width: 300px">
						到货时间：
						<el-date-picker
							disabled
							clearable
							v-model="item.itemArrivalTime"
							style="width: calc(100% - 100px)"
							value-format="YYYY-MM-DD"
							type="date"></el-date-picker>
					</div>
					<div style="flex: 1"></div>
				</div>
			</div>
			<el-form-item style="margin-top: 20px" prop="procureStatus" label="审核状态">
				<el-radio-group disabled v-model="form.procureStatus">
					<el-radio v-for="item in procure_status" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item prop="auditNote" label="审核备注">
				<el-input disabled v-model="form.auditNote" :rows="5" type="textarea" style="margin-bottom: 5px" placeholder="审核必须填写" />
			</el-form-item>
		</el-form>
		<!-- 审核 -->
		<el-dialog :title="`采购审核`" v-model="openC" width="800px" append-to-body :close-on-click-modal="false">
			<el-form ref="baseformc" :model="formCk" label-position="right" :rules="rulesCk" label-width="120px">
				<el-form-item prop="procureStatus" label="审核">
					<el-radio-group v-model="formCk.procureStatus">
						<el-radio label="2">审核通过</el-radio>
						<el-radio label="3">审核不通过</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item prop="auditNote" label="审核备注">
					<el-input v-model="formCk.auditNote" :rows="5" type="textarea" style="margin-bottom: 5px" placeholder="审核备注" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<div style="text-align: right">
					<el-button type="primary" @click="submitCheck">确 定</el-button>
					<el-button @click="ccel">取 消</el-button>
				</div>
			</div>
		</el-dialog>
		<div style="line-height: 80px; height: 80px; padding-left: 100px">
			<el-button @click="reback">返回</el-button>
		</div>
	</div>
</template>
<script setup>
import { reactive, toRefs } from 'vue'
const { proxy } = getCurrentInstance()
import { selectProject } from '@/api/project/project'
import { getProcure, checkProcure, getQuotation, delProcure, getProduct } from '@/api/buy/buy'
import { download } from '@/utils/request'
const { procure_status } = proxy.useDict('procure_status')
const { item_type } = proxy.useDict('item_type')
const router = useRouter()

const baseformc = ref()
import { useRoute } from 'vue-router'
import useTagsViewStore from '@/store/modules/tagsView'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
const productOption = ref([])
getProduct().then((res) => {
	if (res) productOption.value = filtList(res)
})
const filtList = (data) => {
	let newData = []
	for (let item of data) {
		let obj = { label: `[${item.categoryName}]-${item.typeName}`, value: item.typeId }
		newData.push(obj)
	}
	return newData
}
const tagsView = useTagsViewStore()
const dowloadList = ref([])
const route = useRoute()
if (route.query.id) {
	getProcure(route.query.id).then((res) => {
		for (let item in form) {
			form[item] = res.data[item]
		}
		form.procureStatus = res.data['procureStatus'] + ''
		formCk.projectId = res.data['projectId'] + ''
		if (res.data.fileUrl) dowloadList.value.push(res.data.fileUrl)
	})
}
const form = reactive({
	procureId: '',
	procureName: '',
	procureStatus: '',
	projectName: '',
	projectId: '',
	fileUrl: '',
	auditNote: '',
	createUserCode: '',
	projectProcureItemBos: [
		{
			itemName: '',
			itemParameter: '',
			itemBrand: '',
			itemNumber: 0,
			itemUnitPrice: 0,
			itemType: undefined,
			quotationItemId: undefined,
			productTypeId: undefined
		}
	]
})

const rules = {
	procureName: [{ required: true, message: '集团名称不能为空', trigger: 'blur' }],
	projectId: [{ required: true, message: '项目不能为空', trigger: 'blur' }],
	procureStatus: [{ required: true, message: '审核状态不能为空', trigger: 'blur' }],
	auditNote: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
}
const formCk = reactive({
	procureId: route.query.id,
	procureStatus: '',
	auditNote: '',
	projectId: ''
})
const rulesCk = {
	procureStatus: [{ required: true, message: '审核状态不能为空', trigger: 'blur' }]
}

const loading = ref(false)
const list = ref([])
const options = ref([])
const { projectId } = toRefs(form)
const quotationList = ref([])

watch(projectId, () => {
	getQuotation(projectId.value).then((res) => {
		quotationList.value = res.map((e) => {
			return {
				label: e.itemName,
				value: e.itemId + ''
			}
		})
	})
})

selectProject().then((res) => {
	list.value = res.map((e) => {
		return {
			label: e.projectName,
			value: e.projectId
		}
	})
	options.value = list.value
})
const remoteMethod = (query) => {
	if (query) {
		loading.value = true
		setTimeout(() => {
			loading.value = false
			options.value = list.value.filter((item) => {
				return item.label.toLowerCase().includes(query.toLowerCase())
			})
		}, 200)
	} else {
		options.value = list.value
	}
}
const toEdit = (id) => {
	router.push({
		path: '/buy/buyEdit',
		query: { id: form.procureId }
	})
}
const openC = ref(false)
const toCheck = () => {
	openC.value = true
}
const ccel = () => {
	openC.value = false
}
const submitCheck = () => {
	baseformc.value.validate((valid, e) => {
		if (valid) {
			if (formCk.procureStatus == '2') {
				if (form.procureStatus == '1') {
					formCk.procureStatus = '2'
				} else if (form.procureStatus == '2') {
					formCk.procureStatus = '4'
				} else if (form.procureStatus == '4') {
					formCk.procureStatus = '5'
				}
			} else {
				formCk.procureStatus = '3'
			}
			checkProcure(formCk).then((res) => {
				proxy.$modal.msgSuccess('审核成功！')
				tagsView.delView(router.currentRoute.value)
				router.go(-1)
			})
		}
	})
}
const toSub = () => {
	checkProcure({
		procureId: route.query.id,
		procureStatus: '1',
		auditNote: '',
		projectId: formCk.projectId
	}).then((res) => {
		proxy.$modal.msgSuccess('提交成功！')
		tagsView.delView(router.currentRoute.value)
		router.go(-1)
	})
}
const downloadFile = (file) => {
	download({ url: file }).then()
}
const toDelete = () => {
	proxy.$modal
		.confirm('是否确认此操作？')
		.then(() => {
			return delProcure(form.procureId)
		})
		.then(() => {
			tagsView.delView(router.currentRoute.value)
			router.go(-1)
			proxy.$modal.msgSuccess('删除成功')
		})
		.catch(() => {})
}
const toCheckLogs = () => {
	router.push({
		path: '/log/logManage',
		query: { id: route.query.id, type: 4 }
	})
}
const reback = () => {
	tagsView.delView(router.currentRoute.value)
	router.go(-1)
}
</script>
<style lang="scss" scoped>
.info-url {
	display: block;
	width: 100%;
	height: 30px;
	line-height: 30px;
	font-size: 14px;
	background-color: #3f9efe;
	color: #ffffff;
	margin: 5px 0;
	padding-left: 10px;
	cursor: pointer;
}
.header {
	height: 40px;
	line-height: 40px;
	border-bottom: 1px rgba(240, 240, 240, 1) solid;
	margin-bottom: 5px;
}
.item-row {
	width: max-content;
	height: 50px;
	line-height: 50px;
	border-bottom: 1px rgba(240, 240, 240, 1) solid;
	display: flex;
	.item-col {
		width: 200px;
	}
}
</style>
